<template>
  <header>
    <nav class="container">
      <router-link to="/" class="logo">
        <i class="fa-solid fa-sun"></i>
        <p>新中地天气</p>
      </router-link>
      <div class="weather-information" v-if="isLoaded">
        <h4>{{ localCity }}</h4>
        <span>
          实时天气：{{ topHeaderLivesWeather.weather }} {{ topHeaderLivesWeather.temperature }}℃
        </span>
        <span>
          {{ topHeaderLivesWeather.winddirection }}风{{ topHeaderLivesWeather.windpower }}级
        </span>
      </div>
      <div class="about">
        <i class="fa-solid fa-circle-info" @click="aboutFlag = true"></i>
        <i v-if="showAddIcon" class="fa-solid fa-plus" @click="addCity"></i>
      </div>
    </nav>
  </header>
</template>

<script setup>
import { useWeatherStore } from '@/stores/weather'
import { storeToRefs } from 'pinia'

const { localCity, topHeaderLivesWeather, isLoaded, showAddIcon, aboutFlag } = storeToRefs(
  useWeatherStore()
)
const { addCity } = useWeatherStore()
</script>

<style lang="scss" scoped>
header {
  position: sticky;
  top: 0px;
  background-color: rgb(0, 102, 138);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: 10;

  .container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24.5px 160px;
    color: white;

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 24px;
      color: white;
      text-decoration: none;
    }

    .weather-information {
      display: flex;
      align-items: center;
      gap: 16px;

      h4 {
        font-size: 18px;
        font-weight: 400;
      }

      span {
        font-size: 14px;
      }
    }

    .about {
      flex: 1 1 0%;
      display: flex;
      justify-content: flex-end;
      gap: 12px;

      i {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
